<template>
  <div>
    <header>
      <img src="@/assets/img/640.jpg" alt class="yM-mH-img" />
      <div class="yM-mH-user">
        <router-link tag="div" to="/login">
          <img src="@/assets/logo.png" alt class="head-sculpture" />
        </router-link>
        <div class="user-name">
          <p>{{userInfo ? userInfo : '请登录'}}</p>
          <p>欢迎回来!</p>
        </div>
      </div>
    </header>
    <van-grid :column-num="2" :gutter="20">
      <van-grid-item>
        <span class="iconfont iconyinle"></span>
        本地音乐
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont iconiconfontzhizuobiaozhun023146-copy"></i>
        歌曲下载
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont iconshipin"></i>
        mv下载
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont iconshijian"></i>
        最近播放
      </van-grid-item>
    </van-grid>
    <section>
      <h3>我的收藏</h3>
      <div class="collection-item">
        <img src="@/assets/img/collect.jpg" alt />
        <p>
          我的最爱
          <br />50首
        </p>
        <i class="iconfont iconqianjin"></i>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Mine',
  props: {
    msg: String
  },
  data() {
    return {
      userInfo: ''
    }
  },
  created: function() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo: async function() {
      const { data: res } = await this.axios.get('/api/users/getUser')
      if (res.code === 200) {
        // console.log(res)
        this.userInfo = res.data.username
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
header {
  position: relative;
  background: #000;
  .yM-mH-img {
    vertical-align: top;
    width: 100%;
    opacity: 0.6;
  }
  .yM-mH-user {
    position: absolute;
    height: 150px;
    left: 10%;
    top: 50%;
    color: #fff;
    .head-sculpture {
      float: left;
      width: 150px;
      border-radius: 50%;
      background-color: #fff;
    }
    .user-name {
      padding-left: 180px;
      padding-top: 40px;
      font-size: 32px;
    }
  }
}
.van-grid {
  margin-top: 40px;
  ::v-deep .van-grid-item {
    height: 160px;
    color: #fff;
  }
  ::v-deep .van-grid-item__content {
    background: #000;
    opacity: 0.4;
  }
}
section {
  padding: 0 40px;
  font-size: 32px;
  .collection-item {
    position: relative;
    img {
      float: left;
      width: 220px;
      height: 220px;
    }
    img::after {
      content: '';
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    p {
      padding-left: 253px;
      padding-top: 70px;
    }
    i {
      position: absolute;
      top: 50%;
      right: 0;
      font-size: 60px;
    }
  }
}
</style>
